<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>surmom.me - map</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
    <script src="https://webapi.amap.com/maps?v=1.3&key=5cd9928ca71f5d54a3385d03bc112725"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
        .amap-logo,
        .amap-toolbar,
        .amap-copyright {
            display: none!important;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [104.07, 30.67],
        zoom: 10
    });
    map.setLang('zh_en');
    var contextMenu = new AMap.ContextMenu();  //创建右键菜单
    //右键放大
    contextMenu.addItem("放大一级", function() {
        map.zoomIn();
    }, 0);
    //右键缩小
    contextMenu.addItem("缩小一级", function() {
        map.zoomOut();
    }, 1);
    //右键显示全国范围
    contextMenu.addItem("缩至全国", function(e) {
        map.setZoomAndCenter(4, [108.946609, 34.262324]);
    }, 2);

    //地图绑定鼠标右击事件——弹出右键菜单
    map.on('rightclick', function(e) {
        contextMenu.open(map, e.lnglat);
        contextMenuPositon = e.lnglat;
    });
    var marker = new AMap.Marker({
        position: map.getCenter(),
        draggable: true,
        cursor: 'move'
    });
    map.setMapStyle('light');
    marker.setMap(map);
    // 设置点标记的动画效果，此处为弹跳效果
    marker.setAnimation('AMAP_ANIMATION_BOUNCE');
</script>
</body>
</html>
